/* 主题颜色变量 */

$primary-color: #FFD84D;

/* 主题黄色 */

$primary-light: #FFE37D;

/* 浅黄色 */

$primary-dark: #FFCC33;

/* 深黄色 */

$primary-orange: #FF9757;

/* 橙色 */

$primary-gradient: linear-gradient(135deg, #FFD84D, #FFCC33);

/* 黄色渐变 */

$primary-gradient-color: #ffdf6a;   /* 渐变头部 */

$text-color: #333333;

/* 主文本颜色 */

$text-color-light: #666666;

/* 次要文本颜色 */

$text-color-lighter: #999999;

/* 辅助文本颜色 */

$text-color-white: #ffffff;

/* 白色文本 */

$background-color: #f5f7fa;

/* 背景色 */

$card-background: #ffffff;

/* 卡片背景色 */

$border-color: #e5e5e5;

/* 边框颜色 */


/* 额外的颜色 */

$color-progress-bg: #f0f0f0;

/* 进度条背景色 */

$color-progress-success: #4CAF50;

/* 进度条成功色 */

$color-progress-warning: #FF9800;

/* 进度条警告色 */

$color-progress-danger: #F44336;

/* 进度条危险色 */

$color-category-active: #ff6b6b;

/* 分类选中色 */

$color-category-bg: #f5f5f5;

/* 分类背景色 */

$border-radius: 8rpx;

/* 默认圆角 */

$border-radius-large: 50rpx;

/* 大圆角 */

$border-radius-circle: 50%;

/* 圆形边框 */

$shadow-small: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

/* 小阴影 */

$shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

/* 中阴影 */

$shadow-large: 0 8rpx 16rpx rgba(0, 0, 0, 0.12);

/* 大阴影 */

$success-color: #07C160;

/* 成功色 */

$warning-color: #FFC300;

/* 警告色 */

$error-color: #FA5151;

/* 错误色 */

$info-color: #10AEFF;

/* 信息色 */


/**字体大小*/

$font-size-small: 24rpx;

/* 小字体 */

$font-size-base: 28rpx;

/* 基础字体 */

$font-size-medium: 32rpx;

/* 中等字体 */

$font-size-large: 36rpx;

/* 大字体 */

$font-size-xlarge: 48rpx;

/* 间距 */

$spacing-mini: 8rpx;
$spacing-small: 16rpx;
$spacing-base: 24rpx;
$spacing-medium: 32rpx;
$spacing-large: 40rpx;
$spacing-xlarge: 60rpx;

/* 动画 */

$transition-duration: 0.3s;

/* 混合宏 */

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@mixin button-primary {
    height: 90rpx;
    border-radius: $border-radius-large;
    background: $primary-gradient;
    color: $text-color-white;
    font-size: $font-size-medium;
    font-weight: bold;
    @include flex-center;
    box-shadow: 0 8rpx 16rpx rgba(255, 216, 77, 0.3);
    &:active {
        transform: scale(0.98);
    }
}

@mixin input-style {
    background-color: $card-background;
    height: 90rpx;
    border-radius: $border-radius-large;
    margin-bottom: $spacing-large;
    display: flex;
    align-items: center;
    padding: 0 $spacing-large;
    box-shadow: $shadow-small;
}


/* 动画 */

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}